<!-- @format -->

<template>
    <div class="normal-layout-header">
        <div class="left">
            <b-icon v-show="sidebarCollapsed" name="bi-text-indent-left" size="20" @click="collapsed" />
            <b-icon v-show="!sidebarCollapsed" name="bi-text-indent-right" size="20" @click="collapsed" />
        </div>
        <div class="right">
<!--            <div class="header-button">-->
<!--                <el-dropdown trigger="click">-->
<!--                    <el-badge :is-dot="hasUnRead()" class="item">-->
<!--                        <b-icon name="bi-bell" />-->
<!--                    </el-badge>-->
<!--                    <template #dropdown>-->
<!--                        <el-dropdown-menu>-->
<!--                            <h-message />-->
<!--                        </el-dropdown-menu>-->
<!--                    </template>-->
<!--                </el-dropdown>-->
<!--            </div>-->
            <div class="header-button" @click="fullScreen">
                <el-tooltip v-if="fullScreenState" content="退出全屏">
                    <b-icon name="bi-fullscreen-exit" size="16" />
                </el-tooltip>
                <el-tooltip v-else content="全屏">
                    <b-icon name="bi-fullscreen" size="16" />
                </el-tooltip>
            </div>
            <div class="header-button">
                <div class="user-menu">
                    <img v-if="userInfo.sex === 2" :size="30" class="avatar" src="../../assets/user/user__easyico_1.png" />
                    <img v-else :size="30" class="avatar" src="@/assets/user/user__easyico.png" />
                    <span class="nick-name">{{ userInfo.realName || userInfo.nickName }}</span>
                </div>
            </div>
            <div class="header-button" style="margin-left: 10px">
                <el-dropdown>
                    <div class="user-menu">
                        <b-icon name="bi-three-dots-vertical" size="16" style="padding: 4px" />
                    </div>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="updatePasswordClick">
                                <b-icon name="bi-shield-lock" />
                                <span>修改密码</span>
                            </el-dropdown-item>
                            <el-dropdown-item @click="logout">
                                <b-icon name="bi-power" />
                                <span>退出</span>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>
        <UpdatePassword ref="updatePassword" />
    </div>
</template>

<script setup>
import {ref, computed, reactive} from "vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router";
import LocalDB from "../../utils/LocalDB";
import UpdatePassword from "./components/UpdatePassword.vue";
import HMessage from "./components/h-message.vue"

const {$fileFullPath} = window;
const store = useStore();
const router = useRouter();
// 侧边栏折叠状态
const sidebarCollapsed = computed(() => store.getters.sidebarCollapsed);
// 用户信息
const userInfo = computed(() => store.getters.userInfo);

// 全屏状态
const fullScreenState = ref(false);

// 点击折叠按钮
function collapsed() {
    store.dispatch("sidebarCollapsed", !sidebarCollapsed.value);
}

// 未读全局消息
const unReadMessageList = computed(() => {
    return (store.getters.globalMessageList || []).filter(item => item.isRead === 0);
})

// 存在未读消息
function hasUnRead() {
    return unReadMessageList.value.length > 0
}

// 是否全屏
function isFullScreen() {
    return !!(
        document.fullscreen ||
        document.mozFullScreen ||
        document.webkitIsFullScreen ||
        document.webkitFullScreen ||
        document.msFullScreen
    );
}

// 开启全屏
function full(ele) {
    if (ele.requestFullscreen) {
        ele.requestFullscreen();
    } else if (ele.mozRequestFullScreen) {
        ele.mozRequestFullScreen();
    } else if (ele.webkitRequestFullscreen) {
        ele.webkitRequestFullscreen();
    } else if (ele.msRequestFullscreen) {
        ele.msRequestFullscreen();
    }
}

// 退出全屏
function exitFullscreen() {
    if (document.exitFullScreen) {
        document.exitFullScreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    }
}

// 文件全路径
function fileFullPath(val) {
    return $fileFullPath(val);
}

// 全屏
function fullScreen() {
    if (isFullScreen()) {
        fullScreenState.value = false;
        exitFullscreen();
    } else {
        fullScreenState.value = true;
        full(document.body)
    }
    setTimeout(() => {
        store.dispatch("setContainerHeight", document.documentElement.clientHeight - 90)
    }, 1000)
}


// 修改密码
const updatePassword = ref()

function updatePasswordClick() {
    console.log("修改密码")
    updatePassword.value.show({
        title: "修改登录密码",
        options: {},
        ok: () => {
            $message.success("修改成功，请重新登录")
            LocalDB.setItem("redirect", window.location.hash.replace("#", ""))
            LocalDB.setItem("token", null);
            setTimeout(() => {
                router.replace("/login")
            }, 300)
        }
    })
}

// 退出
async function logout() {
    const ok = await $confirmSync("退出", "您确定要退出登录么？");
    if (!ok) return
    LocalDB.setItem("redirect", window.location.hash.replace("#", ""))
    LocalDB.setItem("token", null);
    setTimeout(() => {
        router.replace("/login")
    }, 300)
}
</script>


<style lang="scss" scoped>

// 头部栏
.normal-layout-header {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    .user-menu {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }

    .avatar {
        width: 32px;
        height: 32px;
        border-radius: 4px;
        object-fit: cover;
    }

    .left {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }

    .right {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;

    }
}

.org-change {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
    backdrop-filter: blur(100px);
    background-color: rgba(255, 255, 255, 0.5);
    padding: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .org-cell {
        width: 300px;
        height: 80px;
        line-height: 80px;
        text-align: center;
        font-size: 26px;
        border: 2px solid #999;
        margin-bottom: 20px;
        border-radius: 6px;
        cursor: pointer;
        user-select: none;

        &:hover {
            background-color: var(--el-color-primary-light-9);
            border: 2px solid var(--el-color-primary);
        }

        &:active {
            opacity: 0.7;
        }
    }

    .active-org {
        background-color: var(--el-color-primary-light-9);
        border: 2px solid var(--el-color-primary);
        color: var(--el-color-primary);
        box-shadow: 0 0 10px 0 var(--el-color-primary-light-7);
    }

    .close {
        position: absolute;
        right: 20px;
        top: 20px;

    }
}


</style>
